<template>
   <div style="margin-top:10px">
    <!-- 封面 -->
    <div class="btn-image" @click='hOpenDialog'>
      <img :src="imageUrl" alt="">
    </div>
    <!-- 对话框 -->
    <!-- visible属性: 控制对话框显示;
          .sync修饰符: 对传递给子组件的 prop 数据进行“双向绑定” ;
          modal-append-to-body: 遮罩层是否插入到body上(动态 加:)-->
    <el-dialog
      title="选择素材"
      :modal-append-to-body='false'
      :visible.sync="dialogVisible"
      style="margin-top:-88px"
    >
      <!-- tab切换栏 - 自定义 -->
      <el-tabs type="card" v-model="activeName" @tab-click="hClickTab">
        <!-- 素材库选项卡 -->
        <!-- name属性: 与选项卡绑定值 value 对应的标识符 -->
        <el-tab-pane label="素材库" name="images">
          <!-- 单选框标签页 -->
          <el-radio-group
            style="margin-bottom: 30px;"
            v-model="isCollected"
            @change="hSwitchRadio">
              <!--v-model 绑定选中当前值的button(高亮)

              label属性: 设置当前项被选中时的值 (注意: 动态属性加:) -->
              <el-radio-button :label="false">全部</el-radio-button>
              <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
            <!-- 素材列表 - layout布局+图片 -->
            <!-- gutter 属性来指定每一栏之间的间隔 -->
            <el-row :gutter="10">
              <!--span 属性表示24份中占几份-->
              <!-- v-for中key记得写!! -->
              <el-col
              :span="6"
              class="img_item"
              :key="item.id"
              v-for="item in images"
              :class="{selected: item.url === selectedImageUrl}"
              >
                <el-image
                style="width: 150px; height: 150px"
                :src="item.url"
                fit="cover"
                @click="hSelectImage(item.url)"></el-image>
              </el-col>
            </el-row>
            <!-- 分页 -->
            <!-- page-size 表示根据每页的数据条数 计算总页数 -->
            <el-pagination
              background
              style="margin-top: 16px"
              layout="prev, pager, next"
              :total='totalCount'
              :page-size="8"
              @current-change='hPageChange'>
            </el-pagination>
        </el-tab-pane>
        <!-- 上传图片选项卡 -->
          <el-tab-pane label="上传图片" name="upload">
            <!-- action: 上传地址; name: 上传文件字段名 (参考接口文件)
            - headers: 设置上传的请求头部。要携带token
            - name：上传的文件字段名。要与接口中要求保持一致。
            - show-file-list： 是否显示已上传文件列表
            - on-success：文件上传成功时的钩子。`function(response, file, fileList)`
            - before-upload: 上传之前对文件进行检测。  -->
            <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :headers="headers"
            name="image"
            :show-file-list="false"
            :on-success="hUpSuccess"
            :before-upload="beforeUpload">
            <!-- 上传成功 预览图片 -->
            <img v-if="uploadedImage" :src="uploadedImage" class="avatar">
            <!-- 未上传 显示默认加号图片 -->
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <!-- 取消, 关闭对话框 -->
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 由于封面初始图片为动态设置的, webpack无法正常处理, 导致图片路径不正常
// 解决: 手动导入
import defaultImage from '@/assets/default.png'

export default {
  name: 'cover',
  // 接收父组件home中v-model的值
  props: ['value'],
  data () {
    return {
      // 是否显示对话框
      dialogVisible: false,
      // 选择项中默认选中是那一项
      activeName: 'images',
      // 素材列表数据
      images: [],
      // 总数量
      totalCount: 0,
      // 当前页
      page: 1,
      // 是否收藏
      isCollected: false,
      // 上传的图片地址 - 设置初始图片 (父组件有数据传递来, 则用传递的,没有则用默认的)
      imageUrl: this.value || defaultImage,
      // 记录选中的图片
      selectedImageUrl: '',
      // 请求头
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      // 上传成功后的预览图片
      uploadedImage: ''
      // 图片按钮上默认的图片
      // coverImageUrl: defaultImage
    }
  },
  methods: {
    // 点击图片按钮
    hOpenDialog () {
      // 显示对话框
      this.dialogVisible = true
      // 清空预览图片
      this.uploadedImage = ''
      // 清空选中的图片
      this.selectedImageUrl = ''
      // 发送请求
      this.loadImages()
    },

    // 收集组装 参数
    buildParam () {
      const params = {
        collect: this.isCollected, // 收藏的图片
        page: this.page, // 页码
        per_page: 8 // 每页数量
      }
      return params
    },
    // 发送获取 素材数据 请求
    async  loadImages () {
      // 请求接口 参数
      const params = this.buildParam()
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params
        })
        // console.log(res)
        this.images = res.data.data.results
        // console.log(this.images)
        this.totalCount = res.data.data.total_count
      } catch (err) {
        console.log(err)
        // 请求失败
        this.images = []
        this.totalCount = 0
        this.$message.error('获取不了图片呢!')
      }
    },

    // 点击分页 - 自动传当前页
    hPageChange (curPage) {
      // 更新页码
      this.page = curPage
      // 重发请求
      this.loadImages()
    },

    // 点击单选框 切换全部/收藏
    hSwitchRadio () {
      // 选中的不是收藏的
      if (this.isCollected === false) {
        // 清空选中状态
        this.selectedImageUrl = ''
      }
      // 回到 第一页
      this.page = 1
      // 发送请求
      this.loadImages()
    },
    // 点击tab 切换素材库/上传图片
    hClickTab () {
      // 清空选中状态
      this.selectedImageUrl = ''
    },

    // 选中图片保存图片url
    hSelectImage (url) {
      this.selectedImageUrl = url
    },

    // 上传前 验证图片
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 上传成功后
    hUpSuccess (res, file) {
      // console.log(res)
      // 保存到 预览图片
      this.uploadedImage = res.data.url
    },

    // 确认按钮 - 上传图片成功后
    hConfirm () {
      // 验证
      // 如果没选择图片 点确认
      if (this.activeName === 'images' && !this.selectedImageUrl) {
        this.$message.error('选择图片后点击, 不要调皮哦')
        // eslint-disable-next-line no-useless-return
        return
      }
      // 如果没上传图片 点确认
      if (this.activeName === 'upload' && !this.uploadedImage) {
        this.$message.error('上传图片后点击, 不要调皮哦')
        // eslint-disable-next-line no-useless-return
        return
      }
      // 选择了/上传了图片
      this.imageUrl = this.activeName === 'images' ? this.selectedImageUrl : this.uploadedImage
      // 提示
      this.$message.success('上传成功')
      // 抛出input事件, 携带数据给父组件
      this.$emit('input', this.imageUrl)
      // 关闭对话框
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
  .btn-image {
    cursor: pointer;
    width: 200px;
    height: 200px;
    border: 1px dashed #ddd;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
// 上传图片
  .avatar-uploader {
  text-align: center;
  margin: 80px;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
// 选中图片
.selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 60px 60px;
  }
.img_item{
    position: relative;
    /deep/ img {
      cursor: pointer
    }
  }
</style>
